<template>
  <div style=" padding: 22px 10px 10px;">
    <h4 class="autotitle">标签管理</h4>

    <div>
      <div class="userm">
        <div
          style="
            height: auto;
            display: flex;
            box-shadow: 0px 0px 15px -10px gray;
            margin-top: 10px;
            float: left;
          "
        >
          <div class="followPhoto">
            <a-avatar :size="50" style="padding: 4px">
              <template #icon><UserOutlined /></template>
            </a-avatar>
          </div>

          <div class="followInfo">
            <li class="followName"><span>角色1</span></li>
            <li class="followBiog">注册时间：<span>828190.213</span></li>
          </div>

          <div class="followButton">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1"  @click="showModal">查看详情</a-menu-item>
                  <a-modal
                    v-model:visible="visible"
                    title="权限信息"
                    @ok="handleOk"
                  >
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                  </a-modal>

                  <a-menu-item key="2">删除</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                操作
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </div>
        </div>

        <div
          style="
            height: auto;
            display: flex;
            box-shadow: 0px 0px 15px -10px gray;
            margin-top: 10px;
            float: left;
          "
        >
          <div class="followPhoto">
            <a-avatar :size="50" style="padding: 4px">
              <template #icon><UserOutlined /></template>
            </a-avatar>
          </div>

          <div class="followInfo">
            <li class="followName"><span>角色2</span></li>
            <li class="followBiog">注册时间：<span>828190.213</span></li>
          </div>

          <div class="followButton">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1">查看详情</a-menu-item>
                  <a-menu-item key="2">删除</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                操作
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </div>
        </div>

        <div
          style="
            height: auto;
            display: flex;
            box-shadow: 0px 0px 15px -10px gray;
            margin-top: 10px;
            float: left;
          "
        >
          <div class="followPhoto">
            <a-avatar :size="50" style="padding: 4px">
              <template #icon><UserOutlined /></template>
            </a-avatar>
          </div>

          <div class="followInfo">
            <li class="followName"><span>角色3</span></li>
            <li class="followBiog">注册时间：<span>828190.213</span></li>
          </div>

          <div class="followButton">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1">查看详情</a-menu-item>
                  <a-menu-item key="2">删除</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                操作
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, ref } from "vue";
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";

export default defineComponent({
  components: {
    MailOutlined,
    CalendarOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },

  setup() {
    const state = reactive({
      selectedKeys: [],
      openKeys: [],
    });

    const handleClick = (menuInfo) => {
      console.log("click ", menuInfo);
    };

    return { ...toRefs(state), handleClick };
  },

  setup() {
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = e => {
      console.log(e);
      visible.value = false;
    };

    return {
      visible,
      showModal,
      handleOk,
    };
  },

});
</script>

<style>
.autotitle {
  font-size: 22px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.userm {
  padding: 10px 10px 10px;
}

.followPhoto {
  width: 100px;
  height: 100px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.followInfo {
  width: 300px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.followInfo-state {
  width: 500px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.followName {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  margin-right: -2px;
  overflow: hidden;
  vertical-align: -2px;
}

.followBiog {
  color: #000;
  font-size: 14px;
  margin-top: 10px;
  line-height: 18px;
}

.followButton {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px;
  margin-right: 15px;
}
</style>